<template>
  <div class="appointments-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>预约管理</h3>
        </div>
      </template>

      <!-- 数据表格 -->
      <el-table :data="appointmentsList" style="width: 100%" v-loading="loading">
        <el-table-column prop="appointmentId" label="预约编号" width="100" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="packageId" label="套餐ID" width="100" />
        <el-table-column prop="appointmentTime" label="预约时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.appointmentTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
              :loading="deleteLoading"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { queryAll, deleteAppointment } from '@/api/appointments'
import { ElMessage, ElMessageBox } from 'element-plus'

interface Appointment {
  appointmentId: number
  userId: number
  packageId: number
  appointmentTime: Date
  status: string
}

const appointmentsList = ref<Appointment[]>([])
const loading = ref(false)
const deleteLoading = ref(false)

// 获取预约列表
const getAppointmentsList = async () => {
  try {
    loading.value = true
    const { data } = await queryAll()
    console.log('获取预约列表:', data)
    appointmentsList.value = data
  } catch (error) {
    console.error('获取预约列表失败:', error)
    ElMessage.error('获取预约列表失败')
  } finally {
    loading.value = false
  }
}

// 删除预约
const handleDelete = async (row: Appointment) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除预约编号为 ${row.appointmentId} 的记录吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    deleteLoading.value = true
    await deleteAppointment(row.appointmentId)
    ElMessage.success('删除成功')
    await getAppointmentsList() // 刷新列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  } finally {
    deleteLoading.value = false
  }
}

// 格式化日期
const formatDate = (date: Date) => {
  return new Date(date).toLocaleString()
}

// 获取状态对应的类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    '待确认': 'info',
    '已确认': 'warning',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}

onMounted(() => {
  getAppointmentsList()
})
</script>

<style lang="scss" scoped>
.appointments-container {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
